<template>
	<view class="bkg">
		<view
			class="comment-item"
			v-bind:key="index"
			v-for="(item, index) in comments"
		>
			<view class="avatar">
				<u-avatar :src="item.src" mode="square" size="mini"></u-avatar>
			</view>
			<view class="content-border">
				<view class="comment-time">光哥: 2021-02-02 09:20:20</view>
				<view class="content">{{ item.content }}</view>
			</view>
			<view class="opt">
				<u-icon class="icon" name="chat" size="28" color="gray" />
				<u-icon class="icon" name="trash" size="28" color="gray" />
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations, mapGetters } from "vuex";

export default {
	data() {
		return {};
	},
	props: ["caseObj"],
	computed: {
		nickName: function () {
			return this.$store.state.loginedUser.nickName;
		},
		...mapState({
			comments: (state) => {
				return state.caseDetail.current_case.comments;
			},
		}),
	},
	methods: {},
};
</script>

<style scoped lang="scss">
.bkg {
	color: $uni-color-title;
  width: 100%;
  // border: rgb(60, 95, 15) solid 1rpx;
}

.comment-item {
	display: flex;
	// border: rgb(160, 28, 28) solid 1rpx;
	align-items: center;

	.avatar {
		// border: rgb(221, 221, 221) solid 1rpx;
		margin: 0rpx 12rpx;
	}

	.content-border {
		margin-top: 24rpx;
		margin-bottom: 24rpx;

		.comment-time {
			color: $uni-color-subtitle;
			font-size: xx-small;
			padding: 0rpx 6rpx;
			margin-top: -4rpx;
			// border: rgb(221, 221, 221) solid 1rpx;
		}

		.content {
			border-radius: 6rpx;
			line-height: 1.5em;
			padding: 0rpx 6rpx;
			font-size: smaller;
		}
	}

	.opt {
		margin-left: auto;
		padding-right: 16rpx;

		.icon {
			margin-left: 12rpx;
			cursor: pointer;
		}
	}
}
</style>
